{% extends 'base.html' %}
{% load staticfiles %}
{% load codalab_tags %}
{% load tz %}

{% block page_title %}Competitions (My Datasets){% endblock page_title %}
{% block head_title %}Competitions (My Datasets){% endblock %}

{% block extra_head %}
{# include extra JS stuff here #}
{% endblock %}

{% block content %}
<ul class="nav nav-tabs" id="my_competition_tab_nav">
        <li>
            <a href="/my/#competitions">Competitions</a>
        </li>
        <li>
            <a href="/my/#my_participating">Competitions I'm In</a>
        </li>
        <li>
            <a href="/my/#my_managing">Competitions I'm Running</a>
        </li>
        <li class="active">
            <a href="{% url 'my_datasets' %}">My Datasets</a>
        </li>
    </ul>
    <div class="tab-content">
        <div id="my_managing" class="tab-pane active">
            <div class="tab-inner">
                <div class="row">
                    <div class="col-sm-12 kill-newlines">
                        <div class="my-datasets">
                            <a href="{% url 'my_datasets_create' %}" class="button btn btn-primary">Create Dataset</a>
                            <table class="table table-bordered">
                                <thead>
                                    <tr>
                                        <th>Name</th>
                                        <th>Key</th>
                                        <th>Description</th>
                                        <th>Type</th>
                                        <th>Size)</th>
                                        <th width="160">Actions</th>
                                        <th width="60">Select</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for dataset in object_list %}
                                        {% if dataset.is_in_use %}
                                            <tr>
                                        {% else %}
                                            <tr class="failed-submission">
                                        {% endif %}
                                            <td>{{ dataset.name }}</td>
                                            <td>{{ dataset.key }}</td>
                                            <td>{{ dataset.description }}</td>
                                            <td>{{ dataset.type }}</td>
                                            <td>{{ dataset.size }} bytes</td>
                                            <td>
                                                <a href="{% url 'datasets_download' dataset_key=dataset.key %}" class="button btn btn-default btn-sm">Download</a>
                                                <a href="{% url 'my_datasets_delete' pk=dataset.pk %}" class="button btn btn-danger btn-sm delete">Delete</a>
                                            </td>
                                            <td align="center"><input type="checkbox" name="delete_dataset" value="{{ dataset.pk }}"></td>
                                        </tr>
                                    {% empty %}
                                        <tr>
                                            <td colspan="6" class="text-center">
                                                <i>No datasets added yet!</i>
                                            </td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                            <button id="delete_multiple_datasets_button" class="button btn btn-danger pull-right">Delete multiple datasets?</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="panel" align="center">
                <i>Note: Orphaned (EG: un-used) datasets are displayed in red.</i>
            </div>
        </div>
    </div>

{% endblock %}

{% block js %}
    // Deleting multiple datasets action
    $("#delete_multiple_datasets_button").click(function(){
        if(confirm("Are you sure you want to delete all of these datasets?")) {
            ids_to_delete = [];

            $('input[type="checkbox"]:checked').each(function(n, input){
                ids_to_delete.push($(input).attr('value'));
            });

            $.post("{% url "datasets_delete_multiple" %}", {"ids_to_delete": ids_to_delete})
                .done(function() {
                    window.location.reload();
                })
                .fail(function() {
                    alert("Couldn't delete datasets, something went wrong (is your Internet connected?)");
                });
        }
    });

    // Checking multiple datasets with shift key
    var lastChecked = null;

    $(document).ready(function() {
        var $chkboxes = $('input[type="checkbox"]');
        $chkboxes.click(function(e) {
            if(!lastChecked) {
                lastChecked = this;
                return;
            }

            if(e.shiftKey) {
                var start = $chkboxes.index(this);
                var end = $chkboxes.index(lastChecked);

                $chkboxes.slice(Math.min(start,end), Math.max(start,end)+ 1).attr('checked', lastChecked.checked);
            }

            lastChecked = this;
        });
    });
{% endblock js %}
